<template>
	<view class="detail">
		<view class="detail-introduce">
			<view class="introduce-left" v-if="bookimg">
				<image :src="bookimg" mode="" @error="error"></image>
			</view>
			<view class="introduce-left" v-if="!bookimg">
				<image src="../../static/kongimg.jpg" mode="" ></image>
			</view>
			<view class="introduce-right">
				<view class="introduce-title">
					{{title?title:'暂无信息'}}
				</view>
				<view class="introduce-type">
					类型: {{category?category:'暂无信息'}}
				</view>
				<view class="introduce-author">
					作者: {{author?author:'未知'}}
				</view>
				<!-- <view class="introduce-authorizer">
					出版方:{{authorizer?authorizer:'未知'}}
				</view> -->
				<view class="introduce-words">
					<span v-if="words">字数: {{words | words}}</span>
					<!-- <span v-if="clicksCount">{{clicksCount | clickscount}}</span> -->
				</view>
			</view>
		</view>
		<view class="summary">
			<view class="summary-title">
				简介
			</view>
			<view class="summary-content">
				{{summary}}
			</view>
			<view class="keyname">
				<view class="keyname-item" v-for="(i,ind) in keyname" :key="ind">
					{{i}}
				</view>
			</view>
		</view>
		<view class="catalogue" @click="switchcatalogue">
			<view class="catalogue-left">
				查看目录
			</view>
			<view class="catalogue-rigth">
				{{lasttext}}<u-icon name="arrow-right" color="#b3b3b3" size="26"></u-icon>
			</view>
		</view>
		<view class="first" :class="show==false?'hidd':''" v-if="first!=null">
			<rich-text :nodes="first"></rich-text>
		</view>
		<view class="show" @click="showread" v-if="first!=null">
			{{show==true?'收起阅读内容':'展开阅读'}}
		</view>

		<view class="foot">
			<view class="foot-left">
				<span v-if="isjoin==false" @click="join">
					加入书架
				</span>
				<span v-if="isjoin" @click="del" class="action">
					已加入书架
				</span>
			</view>
			<view class="foot-right">
				<span @click="switchContent">
					立即阅读
				</span>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFictionDetail,
		getSectionList,
		getSectionContent
	} from "../../api/index.js"
	export default {
		data() {
			return {
				isjoin: false,
				title: "",
				show: false,
				bookimg: "",
				category: "",
				author: "",
				words: "",
				clicksCount: "",
				authorizer: "",
				summary: "",
				lasttext: "",
				bookid: "",
				firstuuid: "",
				bookdetail: [],
				keyname: [],
				first: ""
			}
		},
		filters: {
			words(val) {
				if (val < 10000) {
					return val + "字"
				}
				return (val / 10000).toFixed(2) + "万字"
			},
			clickscount(val) {
				// console.log(val);
				if (val < 10000) {
					return val + "点击"
				}
				return val + "点击"
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '正在加载...',
			});
			let key = uni.getStorageSync("key")
			this.bookid = options.id
			let book_id = options.id
			if (key.length != 0) {
				uniCloud.callFunction({
					name: "where_collect",
					data: {
						book_id,
						user_id: key
					},
					success: res => {
						if (res.result.data.length != 0) {
							this.isjoin = true
						} else {
							this.isjoin = false
						}
					}
				})
			}

			uni.setNavigationBarTitle({
				title: options.title
			})
			this.title = options.title
			// console.log(options.id,options.title);
			getSectionList(options.id).then(res => {
				// console.log(res.data);
				// console.log(res.data.catalog[0]);
				this.bookimg = res.data.book.coverImage;
				this.firstuuid = res.data.catalog[0].uuid
				// console.log(res.data.catalog.length);
				this.lasttext = res.data.catalog[res.data.catalog.length - 1].title
				// console.log(res.data.catalog[res.data.catalog.length-1].title);
				getSectionContent(options.id, this.firstuuid).then(res => {
					if (res.data.content != null) {
						this.first = res.data.content
					}
					// console.log(res.data);
					// console.log(this.first);
					uni.hideLoading();
				})
			})
			getFictionDetail(options.id, options.title).then(res => {
				// console.log(res.feed.entry);
				this.bookdetail = res.feed.entry;
				if (this.bookdetail.summary != undefined) {
					this.summary = this.bookdetail.summary
				}
				this.category = this.bookdetail["pris:book"].category;
				let keyname = this.bookdetail["pris:book"].keyname;
				console.log(keyname);
				// console.log("keyname:",keyname);
				if (keyname != undefined) {
					console.log(keyname.indexOf("，"));
					if (keyname.indexOf(",") == -1) {
						this.keyname = keyname.split("，")
					} else {
						this.keyname = keyname.split(",")
					}
				}
				this.authorizer = this.bookdetail["pris:book"].authorizer;
				this.author = this.bookdetail.author.name;
				this.words = this.bookdetail["pris:book"].words;
				this.clicksCount = this.bookdetail["pris:subscribe"].clicksCount;
			})

		},
		methods: {
			//加入书架
			join() {
				let key = uni.getStorageSync("key")
				// console.log(key);
				let book_id = this.bookid
				let title = this.title
				let bookimg = this.bookimg
				if (key.length != 0) {
					uniCloud.callFunction({
						name: "add_bookshelf",
						data: {
							book_id,
							user_id: key,
							title,
							bookimg
						},
						success: res => {
							console.log(res);
							this.isjoin = true
						}
					})

				} else {
					console.log("未登录");
				}

			},
			//取消加入书架
			del() {
				let key = uni.getStorageSync("key")
				// console.log(key);
				let book_id = this.bookid
				uniCloud.callFunction({
					name: "del_bookshelf",
					data: {
						book_id,
						user_id: key
					},
					success: res => {
						// console.log(res);
						this.isjoin = false
					}
				})

			},
			//替换图片
			error() {
				this.bookimg = "../../static/kongimg.jpg"
			},
			//查看更多内容
			showread() {
				this.show = !this.show
			},
			//跳转目录
			switchcatalogue() {
				console.log(this.bookid);
				uni.navigateTo({
					url: `../catalogue/catalogue?bookid=${this.bookid}&bookimg=${this.bookimg}&booktitle=${this.title}&booksummary=${this.summary}`
				})
			},
			//获取第一个章节内容
			switchContent() {

				let key = uni.getStorageSync("key")
				if (key.length != 0) {
					let book_img = this.bookimg
					let book_id = this.bookid
					let book_title = this.title
					let book_summary = this.summary
					// console.log(this.bookimg,this.bookid,this.title,this.summary);
					uniCloud.callFunction({
						name: "where_read",
						data: {
							user_id: key,
							book_id
						},
						success: res => {
							console.log(res);
							if (res.result.data.length != 0) {
								// console.log("已经阅读过");
								uniCloud.callFunction({
									name: "del_readhistory",
									data: {
										user_id: key,
										book_id
									},
									success: res => {
										console.log(res);
										if (res.result.deleted == 1) {
											uniCloud.callFunction({
												name: "read_history",
												data: {
													user_id: key,
													book_img,
													book_id,
													book_title,
													book_summary
												},
												success: res => {
													console.log(res);
												}
											})
										}
									}
								})
							} else {
								// console.log("还没看过");
								uniCloud.callFunction({
									name: "read_history",
									data: {
										user_id: key,
										book_img,
										book_id,
										book_title,
										book_summary
									},
									success: res => {
										console.log(res);
									}
								})
							}
						}
					})
					uniCloud.callFunction({
						name: "where_novel_records",
						data: {
							user_id: key,
							book_id
						},
						success: res => {
							// console.log(res,9999);
							if (res.result.data.length != 0) {
								let {
									book_uuid,
									chapter_index
								} = res.result.data[0]
								uni.navigateTo({
									url: `../fictioncontent/fictioncontent?bookid=${this.bookid}&uuid=${book_uuid}&ind=${chapter_index}`
								})
							} else {
								//添加记录
								let book_uuid = this.firstuuid
								uniCloud.callFunction({
									name: "add_novel_records",
									data: {
										user_id: key,
										book_id,
										book_uuid,
										chapter_index: 0
									},
									success: res => {
										uni.navigateTo({
											url: `../fictioncontent/fictioncontent?bookid=${book_id}&uuid=${book_uuid}&ind=0`
										})
									}
								})

							}
						}
					})
				} else {
					let ind = 0
					let book_img = this.bookimg
					let book_id = this.bookid
					let book_title = this.title
					let book_summary = this.summary
					uni.navigateTo({
						url: `../fictioncontent/fictioncontent?bookid=${this.bookid}&uuid=${this.firstuuid}&ind=${ind}`
					})
				}

				// console.log(this.bookid,this.firstuuid,ind);

			}
		}

	}
</script>

<style lang="scss">
	.detail {
		box-sizing: border-box;
		padding: 10px;

		.detail-introduce {
			display: flex;
			border-bottom: 1px solid #ebebeb;
			box-sizing: border-box;
			padding-bottom: 15px;

			.introduce-left {
				width: 110px;
				height: 145px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.introduce-right {
				box-sizing: border-box;
				padding-left: 15px;
				flex: 1;

				.introduce-title {
					font-size: 18px;
					font-weight: bold;
					color: #f9834a;
				}

				.introduce-type {
					font-size: 16px;
					color: #707070;
					margin: 10px 0;
				}

				.introduce-author {
					margin: 10px 0;
					font-size: 17px;
					color: #f9834a;
				}

				.introduce-words {
					color: #707070;

					span {
						font-size: 16px;
						margin-right: 15px;
					}
				}

				.introduce-authorizer {
					color: #707070;
					font-size: 15px;
					margin-bottom: 6px;

				}
			}
		}

		.summary {
			border-bottom: 1px solid #ebebeb;
			box-sizing: border-box;
			padding-bottom: 10px;

			.summary-title {
				font-size: 18px;
				font-weight: bold;
				margin: 10px 0;
			}

			.summary-content {
				line-height: 25px;
				font-size: 15px
			}

			.keyname {
				display: flex;
				flex-wrap: wrap;
				margin: 5px 0;

				.keyname-item {
					margin: 3px 0;
					font-size: 12px;
					margin-right: 10px;
					background-color: #f9834a;
					color: white;
					box-sizing: border-box;
					padding: 3px 5px;
					border-radius: 12px;
				}
			}
		}

		.catalogue {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ebebeb;
			box-sizing: border-box;
			padding: 15px 0;
			align-items: center;

			.catalogue-left {
				font-size: 15px;
				font-weight: bold;
			}

			.catalogue-rigth {
				font-size: 13px;
				color: #b3b3b3;
			}
		}

		.first {
			font-size: 36rpx;
			font-family: "黑体";
			line-height: 60rpx;

			&.hidd {
				height: 300px;
				overflow: hidden;
			}

			img {
				width: 100%;
				height: 400px;
			}

			span {
				font-size: 18px;
			}

			p {
				box-sizing: border-box;
				padding: 0 10px;
				display: flex;
				// justify-content: center;
				letter-spacing: 1px;
				text-indent: 32px;
				line-height: 30px;
				margin: 15px 0;
				// font-family: "宋体";
				color: #4e4e4e;
				// font-weight: bold;
			}
		}

		.show {
			text-align: center;
			font-size: 14px;
			height: 30px;
			line-height: 30px;
			margin-bottom: 60px;
			color: #fff;
			background-color: #ffa67c;
		}

		.foot {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 60px;
			width: 100%;
			box-shadow: 0px 0px 10px 2px #ccc;
			display: flex;
			background-color: #fff;

			.foot-left {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				span {
					background-color: #f5f5f5;
					color: #39342a;
					box-sizing: border-box;
					padding: 9px 50px;
					border-radius: 32px;

					&.action {
						background-color: #ededed;
					}
				}
			}

			.foot-right {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				span {
					background-color: #ffa478;
					color: white;
					box-sizing: border-box;
					padding: 9px 50px;
					border-radius: 32px;
				}
			}
		}
	}
</style>